<template>
  <view class="box-bg">
    <uni-nav-bar shadow color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="待使用订单" @clickLeft="back" />
  </view>
  <view style="margin-top:300rpx">
    <view class="box" v-for="item in daizhifu" :key="item.id">  <!-- 使用唯一key -->
      <!-- 核销码 -->
      <view class="erweima">
        <text>核销码：WE343235E</text>
         <canvas canvas-id="qrCanvas" style="width: 140px; height: 140px;"></canvas>
      </view>
      <view class="list">
        <view class="title">
          <view class="left">
            <text>订单信息</text>
          </view>
          <view class="right">
            <text> 待使用</text>
          </view>
        </view>
        <view class="container">
          <view class="container_left">
            <view>订单号: &nbsp; 4545144244544</view>  <!-- 修正空格转义符 -->
            <view>服务项目: &nbsp; {{ item.type }}</view>
            <view>
              服务门店: &nbsp; {{ item.name }}
              <i class="iconfont icon-gaodeditu"></i>
            </view>
            <view>下单时间: &nbsp; {{ item.time }}</view>
            <view>预约时间: &nbsp; {{ item.time }}</view>
            <view>车辆: &nbsp; 兰博基尼WGC</view>
            <view>备注: &nbsp;</view>
          </view>
        </view>
        <hr />

        <view class="title">
          <view class="left">
            <text>订单详情</text>
          </view>
        </view>
        <view class="container2">
          <!-- 优化列表渲染 -->
          <view 
            v-for="(info, index) in orderInfos" 
            :key="index" 
            class="order_info"
          >
            <view>{{ info.title }}</view>
            <view :style="{ color: info.color }">{{ info.value }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="goods-carts">
      <view class="goods-carts-1" @click="handleContact">  <!-- 添加点击事件 -->
        <i
          style="color: #4e9cfe; font-size: 36rpx"
          class="iconfont color-a-kefufuwu"
        ></i>
        <text class="goods-carts-1-1">联系客服</text>
      </view>
      <view class="goods-carts-2" @click="handleRefund">  <!-- 添加点击事件 -->
        <view class="goods-carts-2-1">申请退款</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue';
import * as QRCode from 'qrcode';

// 使用命名空间调用库方法
const generateQRCode = () => {
  const ctx = uni.createCanvasContext('qrCanvas');
  QRCode.toCanvas(ctx.canvas, 'WE343235E', { width: 140 }, (err) => {
    if (!err) ctx.draw();
  });
};
onMounted(generateQRCode);
const daizhifu = ref([
  {
    id: 1,
    ordernum: "2546554125",
    type: "车辆保养",
    name: "大宝汽车维修店",
    time: "2020-1-1 12:11",
    price: "￥100",
    state: "待支付",
    btn1: "取消订单",
    btn2: "立即支付",
  },
]);

// 计算属性：格式化订单详情
const orderInfos = computed(() => [
  { title: '车辆精洗', value: '$93.9', color: '#000' },
  { title: '车辆附加费用', value: '0', color: '#000' },
  { title: '原价', value: '$93.9', color: '#000' },
  { title: '店家优惠', value: '- $3.9', color: 'rgb(255, 125, 89)' },
  { title: '优惠券', value: '- $3.9', color: 'rgb(255, 125, 89)' },
  { title: '支付金额', value: '$3.9', color: 'rgb(127, 221, 155)' },
]);

// 导航方法
const back = () => {
  uni.navigateBack();
};

// 业务逻辑方法
const handleContact = () => {
  uni.showModal({
    title: '联系客服',
    content: '请拨打客服热线：400-XXX-XXXX',
  });
};

const handleRefund = () => {
  uni.navigateTo({ url: '/pages/refund/refund' });
};
</script>

<style scoped>
.box-bg{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
.erweima {
  width: 90%;
  margin: 10rpx auto;
  display: flex;
  height: 300rpx;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-radius: 30rpx;
}
.erweima text {
  margin-top: 20rpx;
}
.vq {
  width: 240rpx;
}
.box {
  position: relative;
  bottom: 150rpx;
}
.list {
  margin: 10rpx auto;
  background-color: #fff;
  width: 80%;
  padding: 0 30rpx;
  border-radius: 30rpx;
  overflow: hidden;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  font-size: 36rpx;
  border-bottom: 3px solid #f5f5f5;
}
.title .left {
  font-weight: 550;
}
.title .right {
  color: rgb(255, 125, 89);
  font-size: 28rpx;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #f5f5f5;
}
hr {
  border: 1px solid #f5f5f5;
}
.container_left view {
  margin: 16rpx 0;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.bottom .u-button {
  border-radius: 20rpx;

  margin: 20rpx 10rpx;
}
.icon-gaodeditu {
  margin: 0 10rpx;
}
.order_info {
  width: 100%;
  height: 60rpx;
  margin: 20rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4rpx solid #f5f5f5;
}

.goods-carts {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  padding: 0 20rpx;
}

.goods-carts-1 {
  display: flex;
  align-items: center;
}

.goods-carts-1-1 {
  font-size: 30rpx;
  margin-left: 10rpx;
}

.goods-carts-2 {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.goods-carts-2-1 {
  font-size: 30rpx;
  width: 200rpx;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  color: white;
  background-color: rgb(191, 191, 191);
  border-radius: 35rpx;
}

.goods-carts-3 {
  display: flex;
  align-items: center;
  background-color: #4e9cfe;
  width: 200rpx;
  height: 70rpx;
  border-radius: 35rpx;
  justify-content: center;
}

.goods-carts-3-1 {
  font-size: 30rpx;
  color: white;
}
</style>